<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
    <title>线下结算日志</title>
    <script type="text/javascript" src="${ctxStatic}/common/jquery.jqprint-0.3.js"></script>
    <meta name="decorator" content="default"/>
</head>
<body>
<ul class="nav nav-tabs">
    <li class="active"><a href="#">线下结算日志</a></li>
</ul>
<form:form id="searchForm"  action="" method="post" class="breadcrumb form-search">

</form:form>
<sys:message content="${message}"/>
<span id="message1" style="margin-left: 50px;color: red; font-size: 12px;">${alerMessage}</span>
<table id="contentTable" class="table table-striped table-bordered table-condensed">
    <thead>
    <tr>
        <th>商品名称</th>
        <th>商品规格</th>
        <th>商品单价</th>
        <th>商品数量</th>
        <th>商品总额</th>
    </tr>
    </thead>
    <tbody>
    <c:forEach items="${productList}" var="product">
        <tr style="font-size: 12px">
            <td>${product.productTitle}</td>
            <td>${product.productColor}</td>
            <td>${product.productPrice}</td>
            <td>${product.productNum}</td>
            <td>${product.productSum}</td>
        </tr>
    </c:forEach>
    </tbody>
</table>
<div align="right" class="form-actions">
    <input type="button" class="btn btn-primary" onclick="myprint()" value="打印"/>
</div>
<div id="printDiv" style="display: none;">
    <table>
        <tr>
            <td style="width: 20%"></td>
            <td style="width: 20%"></td>
            <td style="width: 20%"></td>
            <td style="width: 20%"></td>
            <td style="width: 20%"></td>
        </tr>
        <tr>
            <td colspan="5"><h4 align="center">----------------</h4></td>
        </tr>
        <tr>
            <td colspan="5"><h4 align="center">${remarks}</h4></td>
        </tr>
        <tr>
            <td colspan="5"><h4 align="center">----------------</h4></td>
        </tr>
        <tr>
            <th colspan="2" style="width: 38%"><div style="font-size: x-small">品名</div></th>
            <th style="width: 20%"><div style="font-size: x-small">数量</div></th>
            <th style="width: 20%"><div style="font-size: x-small">单价</div></th>
            <th style="width: 20%"><div style="font-size: x-small">小计</div></th>
        </tr>
    <c:forEach items="${productList}" var="product">
        <tr>
            <td colspan="2"><h6>${product.productTitle}</h6></td>
            <td><h6><span name="productSum">${product.productPrice}</span></h6></td>
            <td><h6><span name="productPrice">${product.productNum}</span></h6></td>
            <td ><h6 name="litleTotal"></h6></td>
        </tr>
    </c:forEach>
    <tr><td colspan="5"><h6 id="allTotal">总计:</h6></td></tr>
    <tr><td colspan="5"><h6 id="realTotal">实收:${paySum}找零:${giveSum}</h6></td></tr>
        <tr><td colspan="5"><div id="dateTime" style="font-size: 12px;">销售时间:</div></td></tr>
    <tr><td colspan="5"><h4 align="center">谢谢惠顾！</h4></td></tr>
        <tr><td colspan="5"><h4 align="center">----------------</h4></td></tr>
        <tr><td colspan="5"><h4 align="center">----------------</h4></td></tr>

    </table>

</div>
<script language="javascript">
    $(function(){
        var allTotal = 0;
        $("h6[name=litleTotal]").each(function(){
            var quantity = parseInt($(this).parent("td").prev("td").find("span").html());
            var price = parseFloat($(this).parent("td").prev("td").prev("td").find("span").html());
            console.log(price);
            $(this).html(parseFloat(quantity*price).toFixed(2));
            allTotal += parseFloat(parseFloat(quantity*price).toFixed(2));
        })
        $("#allTotal").append(parseFloat(allTotal).toFixed(2));

        var myDate = new Date();
        //获取当前年
        var year=myDate.getFullYear();
        //获取当前月
        var month=myDate.getMonth()+1;
        //获取当前日
        var date=myDate.getDate();
        var h=myDate.getHours();       //获取当前小时数(0-23)
        var m=myDate.getMinutes();     //获取当前分钟数(0-59)
        var s=myDate.getSeconds();

        var now=year+'-'+p(month)+"-"+p(date)+" "+p(h)+':'+p(m)+":"+p(s);
        $("#dateTime").append(now);
    })
    function  myprint(){
        $("#printDiv").css("display","block");
        $("#printDiv").jqprint({
            debug: false, //如果是true则可以显示iframe查看效果（iframe默认高和宽都很小，可以再源码中调大），默认是false
            importCSS: true, //true表示引进原来的页面的css，默认是true。（如果是true，先会找$("link[media=print]")，若没有会去找$("link")中的css文件）
            printContainer: true, //表示如果原来选择的对象必须被纳入打印（注意：设置为false可能会打破你的CSS规则）。
            operaSupport: true//表示如果插件也必须支持歌opera浏览器，在这种情况下，它提供了建立一个临时的打印选项卡。默认是true
        });
    }
    /**
     *
     * 获取当前时间
     */
    function p(s) {
        return s < 10 ? '0' + s: s;
    }

</script>
</body>
</html>
